<template>
  <div class="app">
    <router-view v-if="toBottomPage == false" />
    <el-container v-else>
      <el-header style="padding:0"><Header /></el-header>
      <el-container>
        <el-aside width="200px"><UserMenu /></el-aside>
        <el-container>
          <el-main>
            <router-view/>
          </el-main> 
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

 
<script>
import UserMenu from './components/userMenu.vue'
import Header from './components/header.vue'
export default {
  data() {
    return {
      toBottomPage: true
    };
  },
  components:{
    UserMenu, Header
  },
  watch: {
    $route (to, from){
      // console.log(to, from);
      sessionStorage.setItem('Index', JSON.stringify({activeIndex: to.fullPath}));
      if(to.fullPath == '/login' || to.fullPath == '/register') this.toBottomPage = false
      else if(from.fullPath == '/login') this.toBottomPage = true
      else if(to.fullPath != '/login') this.toBottomPage = true
    }
  },
}
</script>

<style>
html, body, .app{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.el-aside, .el-main {
  height: calc(100vh - 60px);
}
</style>
